import { Ref, useRef, useContext } from 'react';
import { Button, Select, Row, Col, Input, Form } from 'antd';

import { ExpertsDictionaryService } from '../services/DictionaryService';
import { ExpertsUpdateContext } from '../common/ExpertsContext';

import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import pageStyles from '@/common/pageLayout.less';

const UpdateCancelModal: React.FC<ExpertsUpdateAPI.IUpdateCancelModal> = ({ form, onSubmit, onClose }) => {
    const { prefixCls } = useContext(ExpertsUpdateContext);
    const { cancelTypeList } = ExpertsDictionaryService();
    const reloadLayoutRef: Ref<IOneModalRef> = useRef(null);

    /**
     * @onSave
     * @description 保存事件
     */
    const onSave = async () => {
        await onSubmit();
        onCloseModal()
    };

    /**
     * 关闭弹窗
     */
    const onCloseModal = () => {
        if (reloadLayoutRef) {
            if (reloadLayoutRef.current) {
                if (reloadLayoutRef.current.onModalCancel) {
                    reloadLayoutRef.current.onModalCancel();
                }
            }
        }
    };

    const footerRender = () => {
        return (
            <>
                <Button
                    onClick={() => {
                        onCloseModal();
                    }}
                >
                    取消
                </Button>
                <Button type={'primary'} onClick={onSave}>
                    确认
                </Button>
            </>
        );
    };

    return (
        <OneModal
            open={true}
            getContainer={false}
            ref={reloadLayoutRef}
            title={'作废专家'}
            className={'certificate-info-modal'}
            width={550}
            onCancel={() => {
                onClose(false);
            }}
            footer={footerRender()}
            bodyStyle={{
                padding: '5px 0px',
            }}
            centered
        >
            <div className={pageStyles['fromView-styles']}>
                <Row gutter={8} className={`${prefixCls}row`}>
                    <Col span={24} className={`${prefixCls}row-col`}>
                        <Form form={form}>
                            <Form.Item
                                label="取消类型"
                                name="cancelType"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择取消类型',
                                    },
                                ]}
                            >
                                <Select
                                    placeholder="请选择取消类型"
                                    options={cancelTypeList}
                                    fieldNames={{
                                        label: 'name',
                                        value: 'value',
                                    }}
                                />
                            </Form.Item>
                            <Form.Item label="取消原因" name="cancelReason" rules={[{ required: true, message: '请输入取消原因' }]}>
                                <Input.TextArea placeholder="请输入证件描述" showCount maxLength={200} autoSize={{ minRows: 2, maxRows: 4 }} />
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
            </div>
        </OneModal>
    );
};

export default UpdateCancelModal;
